<template>
  <v-row>
    <v-col :cols="12">
      <v-expansion-panels :value="[3]" :multiple="true">

        <v-expansion-panel>
          <v-expansion-panel-header>
            <div class="d-flex justify-space-between align-center" style="padding:0 0px;">
              <div>祷游237</div>
              <div class="d-flex justify-space-between align-center">
                <div style="margin-right:12px;">
                  <img style="width:36px;height: auto;" :src="`https://star.top237.top/pic/${data.countryName}.gif`"></img>
                </div>
                <div>{{ data.countryName }}</div>
              </div>
            </div>
            <template v-slot:actions>
              <j-icon color="#757575" size="20" >向下按钮</j-icon>
            </template>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <div class="my-4 text-subtitle-1">
              所属大陆：{{ data.continent }}
            </div>
            <div class="my-4 text-subtitle-1">
              面积：约{{ data.area }}
            </div>
            <div class="my-4 text-subtitle-1">
              人口：约{{ data.population }}
            </div>
            <div class="my-4 text-subtitle-1">
              首都：{{ data.capital }}
            </div>
            <!-- <WorldMap :countryName="data.countryNameI18n"/> -->
            <!-- <GioBall></GioBall> -->
            <Earth :countryName="data.countryNameI18n"></Earth>
            <p>
              <div>介绍：</div>

              <div v-for="(text,index) in data.describes" :key="index">
                {{ text }}
              </div>
            </p>

          </v-expansion-panel-content>
        </v-expansion-panel>
        <!-- <v-expansion-panel>
          <v-expansion-panel-header> 下载发光如星App(安卓) <template v-slot:actions>
              <j-icon color="#757575" size="20" >向下按钮</j-icon>
            </template></v-expansion-panel-header>
          <v-expansion-panel-content>

                <a
                  download="发光如星_1.0.4.apk"
                  href="https://star.top237.top/lsky/app/app-release-1.0.4.apk"
                  >点击下载</a
                >
                <br>

          </v-expansion-panel-content>
        </v-expansion-panel> -->

        <v-expansion-panel >
          <v-expansion-panel-header> 关注微信公众号：发光如星top237，不迷路 <template v-slot:actions>
              <j-icon color="#757575" size="20" >向下按钮</j-icon>
            </template></v-expansion-panel-header>
          <v-expansion-panel-content>
            <img
              style="width: 100%; height: auto"
              src="../../assets/gonzhonghao.png"
              alt="关注公众号：发光如星top237"
            />
          </v-expansion-panel-content>
        </v-expansion-panel>
        <!-- <v-expansion-panel>
          <v-expansion-panel-header>
            请开发者喝咖啡<j-icon size="20" >咖啡</j-icon>(点击展开)
            <template v-slot:actions>

              <j-icon size="23">点击</j-icon>


            </template>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <p style="font-size: 10px;color:red;">(所有的收入将用在支持购买流量和软件建设（小程序、App、H5）的相关IT服务支持费用上)</p>
            <img
              style="width: 100%; height: auto"
              :src="require('../../assets/4b2766d3c956458ac83231aac3c2eb4.jpg')"
              alt=""
            />

          </v-expansion-panel-content>
        </v-expansion-panel> -->
      </v-expansion-panels>
    </v-col>
  </v-row>
</template>

<script>
import { get237 } from '../../api/top237api';
import gonzhonhao from '../../assets/gonzhonghao.png';
import WorldMap from '../../components/WorldMap/App.vue';
// import GioBall from '../../components/GioBall/GioBall.vue';
import Earth from '../../components/Earth/Earth.vue';

export default {
  name: 'JInfos',
  components: { WorldMap, Earth },
  data() {
    return {
      data: {
        id: 32,
        countryId: '1bbee0e9f216459d92e87895a393181d',
        countryName: '',
        countryNameI18n: 'Morocco',
        nationalDay: null,
        nationalFlag: 'http://img2.xixik.net/custom/section/country-flag/xixik-c010b2f237b7b0b5.gif',
        capital: '拉巴特',
        continent: '非洲',
        area: '446550km²',
        population: '3.71千万 (37,076,584)',
        describes: [
          '宗教：伊斯兰教是摩洛哥的国教。99%以上的居民信奉伊斯兰教，主要为逊尼派；其余人口信奉基督教和犹太教。',
          '21世纪初，中摩经贸合作进一步拓展，摩已成为我国在非洲第九大贸易伙伴、第一大茶叶出口市场、主要渔业合作伙伴和重要工程承包市场。我国成为摩第三大进口来源国。',
          '直到2012年12月，孔子学院在摩洛哥两所大学正式挂牌。',
        ],
        summary: '是一个国家',
        createTime: '2021-08-22 23:36:22',
        updateTime: '2023-05-04 04:20:11',
        name: '摩洛哥',
      },
    };
  },
  computed: {
    isNotif() {
      return location.hostname === 'star.top237.top';
    },
  },
  mounted() {
    get237().then((res) => {
      this.data = res;
    });
  },
};
</script>

<style scoped>
</style>
